<template>
  <div class="registerNum">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      注册编号
      <div slot="right" @click="confirm">确定</div>
    </x-header>
    <group>
      <x-input type="number" v-model="number" :min="11" :max="20" placeholder="请输入11-20个字符"></x-input>
    </group>
    <div class="hint">11-20个字符</div>
  </div>
</template>

<script>
import { XHeader, XInput, Group } from 'vux'
export default {
  components: {
    XHeader,
    XInput,
    Group
  },
  data() {
    return {
      userId: '',
      number: ''
    }
  },
  mounted() {
    this.number = this.$route.query.num.registerNum
    this.userId = this.$route.query.num.id
    console.log(this.userId);
  },
  methods: {
    confirm() {
      // 修改数据
      this.$http.get('url', {
        params: {
          id: this.userId,
          registerNum:this.number
        }
      }).then(res => {

      })
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.registerNum {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
    }
  }
  /deep/.weui-cells {
    margin-top: -2px;
  }
  .hint {
    color: #a8a8a8;
    font-size: 28px;
    padding: 20px;
  }
}
</style>